<template>
    <div class="box">
        <header class="header">
          <ul>
            <li @click="back"><i class="iconfont icon-jiantouarrowhead7"></i></li>
            <li><h5>会员中心</h5></li>
            <li></li>
          </ul>
        </header>
        <div class="content">
          <div class="banner">
            <mt-swipe :auto="4000">
              <mt-swipe-item><img src="@/../static/03.jpg" alt=""></mt-swipe-item>
              <mt-swipe-item><img src="@/../static/04.jpg" alt=""></mt-swipe-item>
              <mt-swipe-item><img src="@/../static/12.jpg" alt=""></mt-swipe-item>
              <mt-swipe-item><img src="@/../static/13.jpg" alt=""></mt-swipe-item>
            </mt-swipe>
          </div>
          <div class="my">
            <ul>
              <router-link :to="item.path" tag="li" v-for="(item, index) of list" :key="index">
                <i :class="item.icon"></i>
                <p>{{item.name}}</p>
              </router-link>
            </ul>
          </div>
          <div class="member_con">
            <h3>时光会员 专享好货</h3>
            <ul>
              <li>
                <img src="@/../static/03.jpg" alt="">
                <p>益智不倒翁玩具</p>
                <span>锻炼小手灵活度</span>
                <b>￥29.9</b>
              </li>
              <li>
                <img src="@/../static/03.jpg" alt="">
                <p>益智不倒翁玩具</p>
                <span>锻炼小手灵活度</span>
                <b>￥29.9</b>
              </li>
              <li>
                <img src="@/../static/03.jpg" alt="">
                <p>益智不倒翁玩具</p>
                <span>锻炼小手灵活度</span>
                <b>￥29.9</b>
              </li>
              <li>
                <img src="@/../static/03.jpg" alt="">
                <p>益智不倒翁玩具</p>
                <span>锻炼小手灵活度</span>
                <b>￥29.9</b>
              </li>
            </ul>
          </div>
        </div>
    </div>
</template>

<script>
// 引入轮播图
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui'
Vue.use(Swipe, SwipeItem)
export default {
  methods: {
    back () {
      this.$router.go(-1)
    }
  },
  data () {
    return {
      list: [{
        path: 'integral',
        name: '我的积分',
        icon: 'iconfont icon-xin'
      }, {
        path: 'signin',
        name: '每日签到',
        icon: 'iconfont icon-xin'
      }, {
        path: 'award',
        name: '我的奖品',
        icon: 'iconfont icon-xin'
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.header {
  @include rect(100%, 0.4rem);
  @include background-color(#DFDFDF);
  ul {
    @include rect (95%, 100%);
    // background:red;
    margin:0 auto;
    @include flexbox();
    @include justify-content(space-between);
    @include align-items();
    li {
      i{
        @include font-size(0.15rem);
        @include text-color(#101010);
      }
      h5 {
        @include font-size(0.15rem);
        @include text-color(#101010);
        @include font-weight(100);
      }
    }
  }
}
.banner {
  @include rect (100%, 2rem);
  img {
    @include rect (100%, 2rem);
    border-radius: 0.12rem;
  }
}
.my {
  @include rect (90%, 1rem);
  margin:0 5%;
  ul {
    @include rect (100%, 1rem);
    @include flexbox();
    @include justify-content(space-around);
    @include align-items();
    li {
      @include flexbox();
      @include justify-content(space-around);
      @include align-items();
      @include flex-direction(column);
      @include rect(0.5rem, 0.8rem);
      i {
        @include rect(0.5rem, 0.5rem);
        border-radius: 0.08rem;
        background: #E6E6E6;
        @include flexbox();
        @include justify-content();
        @include align-items();
        font-size: 0.3rem;
      }
      p {
        @include rect(0.5rem, 0.3rem);
        font-size: 0.12rem;
        color:#666;
        line-height: 0.3rem;
      }
    }
  }
}
.member_con {
  @include rect(90%, auto);
  margin:0.1rem 5%;
  h3 {
    @include rect(100%, 0.3rem);
    @include flexbox();
    @include justify-content();
    @include align-items();
  }
  ul {
    @include rect(100%, 100%);
    // @include flexbox();
    // @include justify-content();
    li {
      @include rect(1.5rem, 2.2rem);
      float: left;
      img {
        @include rect(1.5rem, 1.5rem);
        border-radius: 0.1rem;
      }
      p {
        @include rect(100%, 0.3rem);
        font-size: 0.12rem;
        color:#666;
        @include flexbox();
        @include justify-content();
        @include align-items();
      }
      span {
        @include rect(100%, 0.2rem);
        font-size: 0.1rem;
        color:#bdbdbd;
        @include flexbox();
        @include justify-content();
        @include align-items();
      }
      b {
        @include rect(100%, 0.2rem);
        font-size: 0.1rem;
        color:#d2d2d2;
        @include flexbox();
        @include justify-content();
        @include align-items();
      }
    }
    li:nth-of-type(odd){margin-right:0.3rem}
  }
}
</style>
